<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Ready Bootstrap Dashboard</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="assets/css/mystyle.css">
</head>
<body>
<div class="wrapper">
    <div class="main-header">
        <div class="logo-header">
            <a href="index.html" class="logo">
                路桥监测系统
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">

                <form class="navbar-left navbar-form nav-search mr-md-3" action="">
                    <div class="input-group">
                        <input type="text" placeholder="Search ..." class="form-control">
                        <div class="input-group-append">
								<span class="input-group-text">
									<i class="la la-search search-icon"></i>
								</span>
                        </div>
                    </div>
                </form>
                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="la la-envelope"></i>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown hidden-caret">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="la la-bell"></i>
                            <span class="notification">3</span>
                        </a>
                        <ul class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">
                            <li>
                                <div class="dropdown-title">You have 4 new notification</div>
                            </li>
                            <li>
                                <div class="notif-center">
                                    <a href="#">
                                        <div class="notif-icon notif-primary"><i class="la la-user-plus"></i></div>
                                        <div class="notif-content">
												<span class="block">
													New user registered
												</span>
                                            <span class="time">5 minutes ago</span>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div class="notif-icon notif-success"><i class="la la-comment"></i></div>
                                        <div class="notif-content">
												<span class="block">
													Rahmad commented on Admin
												</span>
                                            <span class="time">12 minutes ago</span>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div class="notif-img">
                                            <img src="assets/img/profile2.jpg" alt="Img Profile">
                                        </div>
                                        <div class="notif-content">
												<span class="block">
													Reza send messages to you
												</span>
                                            <span class="time">12 minutes ago</span>
                                        </div>
                                    </a>
                                    <a href="#">
                                        <div class="notif-icon notif-danger"><i class="la la-heart"></i></div>
                                        <div class="notif-content">
												<span class="block">
													Farrah liked Admin
												</span>
                                            <span class="time">17 minutes ago</span>
                                        </div>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <a class="see-all" href="javascript:void(0);"> <strong>See all notifications</strong> <i
                                        class="la la-angle-right"></i> </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <img src="assets/img/profile.jpg" alt="user-img" width="36"
                                 class="img-circle"><span>Dragon</span></span> </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <div class="user-box">
                                    <div class="u-img"><img src="assets/img/profile.jpg" alt="user"></div>
                                    <div class="u-text">
                                        <h4>Dragon</h4>
                                        <p class="text-muted">dragongao@outlook.com</p><a href="profile.html"
                                                                                          class="btn btn-rounded btn-danger btn-sm">View
                                        Profile</a></div>
                                </div>
                            </li>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#"><i class="ti-user"></i> My Profile</a>
                            <a class="dropdown-item" href="#"></i> My Balance</a>
                            <a class="dropdown-item" href="#"><i class="ti-email"></i> Inbox</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#"><i class="ti-settings"></i> 账户设置</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#"><i class="fa fa-power-off"></i> 注销</a>
                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="scrollbar-inner sidebar-wrapper">
            <div class="user">
                <div class="photo">
                    <img src="assets/img/profile.jpg">
                </div>
                <div class="info">
                    <a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									Dragon
									<span class="user-level">Admin</span>
									<span class="caret"></span>
								</span>
                    </a>
                    <div class="clearfix"></div>

                    <div class="collapse in" id="collapseExample" aria-expanded="true" style="">
                        <ul class="nav">
                            <li>
                                <a href="#profile">
                                    <span class="link-collapse">My Profile</span>
                                </a>
                            </li>
                            <li>
                                <a href="#edit">
                                    <span class="link-collapse">Edit Profile</span>
                                </a>
                            </li>
                            <li>
                                <a href="#settings">
                                    <span class="link-collapse">设置</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="nav">
                <li class="nav-item">
                    <a href="index.html">
                        <i class="la la-home"></i>
                        <p>首页</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#user" data-toggle="collapse" aria-expanded="true">
                        <i class="la la-users"></i>
                        <p>用户管理</p>
                        <span class="caret"></span>
                    </a>
                    <div class="clearfix"></div>
                    <div class="collapse in" id="user" aria-expanded="true" style="">
                        <ul class="nav-item">
                            <li class="my-nav-item">
                                <a href="useradd.html">
                                    <span class="link-collapse">用户添加</span>
                                </a>
                            </li>
                            <li class="my-nav-item">
                                <a href="useredit.html">
                                    <span class="link-collapse">用户修改</span>
                                </a>
                            </li>
                            <li class="my-nav-item">
                                <a href="groupadd.html">
                                    <span class="link-collapse">添加分组</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="#setting" data-toggle="collapse" aria-expanded="true">
                        <i class="la la-edit"></i>
                        <p>系统设置</p>
                        <span class="caret"></span>
                    </a>
                    <div class="clearfix"></div>
                    <div class="collapse in" id="setting" aria-expanded="true" style="">
                        <ul>
                            <li class="my-nav-item">
                                <a href="yuzhiedit.html">
                                    <span class="link-collapse">阈值设置</span>
                                </a>
                            </li>
                            <li class="my-nav-item">
                                <a href="baojingsetting.html">
                                    <span class="link-collapse">报警设置</span>
                                </a>
                            </li>
                            <li class="my-nav-item">
                                <a href="tongzhi.html">
                                    <span class="link-collapse">发布通知</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="#log" data-toggle="collapse" aria-expanded="true">
                        <i class="la la-edit"></i>
                        <p>报表管理</p>
                        <span class="caret"></span>
                    </a>
                    <div class="clearfix"></div>
                    <div class="collapse in" id="log" aria-expanded="true" style="">
                        <ul class="nav-item">
                            <li class="my-nav-item">
                                <a href="baobiao.html">
                                    <span class="link-collapse">报表查看</span>
                                </a>
                            </li>
                            <li class="my-nav-item">
                                <a href="#edit">
                                    <span class="link-collapse">报表上传</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item">
                    <a href="qiaoinformation.html">
                        <i class="la la-info"></i>
                        <p>桥梁监测</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <h4 class="page-title">洪山大桥数据分析</h4>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-text text-left">
                                    请选择时间段
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <form class="col-md-9" action="">
                                        <div class="input-group">
                                            <input type="date" class="form-control">
                                            <label>----</label>
                                            <input type="date" class="form-control">
                                            <div class="input-group-append">
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <input class="btn btn-block btn-round" value="搜索" type="submit">
                                            </div>
                                        </div>
                                    </form>
                                    <div class="col-md-1 col-md-offset-2">
                                        <button class="btn btn-success">下载数据（生成后显示）</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card" style="height: 730px">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card" style="height: 350px">
                                        <div class="card-header">
                                            <p class="card-title">
                                                统计图
                                            </p>
                                        </div>
                                        <div class="card-body">
                                            <div id="chart1" style="height: 300px;width: 480px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card" style="height: 350px">
                                        <div class="card-header">
                                            <p class="card-title">
                                                统计图
                                            </p>
                                        </div>
                                        <div class="card-body">
                                            <div id="chart2" style="height: 300px;width: 480px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card" style="height: 350px">
                                        <div class="card-header">
                                            <p class="card-title">
                                                表格1
                                            </p>
                                        </div>
                                        <div class="card-body">
                                            <div id="chart3" style="height: 300px;width: 480px;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card" style="height: 350px">
                                        <div class="card-header">
                                            <p class="card-title">
                                                表格2
                                            </p>
                                        </div>
                                        <div class="card-body">
                                            <div id="chart4" style="height: 300px;width: 480px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <nav class="pull-left">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                帮助
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#license/#free-item">
                                证书
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="copyright ml-auto">
                    2019, made with <i class="la la-heart heart text-danger"></i> by <a href="#">teamF</a>
                </div>
            </div>
        </footer>
    </div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="modalUpdatePro"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h6 class="modal-title"><i class="la la-frown-o"></i> Under Development</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <p>Currently the pro version of the <b>Ready Dashboard</b> Bootstrap is in progress development</p>
                <p>
                    <b>We'll let you know when it's done</b></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/chartist/chartist.min.js"></script>
<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script src="assets/js/demo.js"></script>
<script src="assets/js/echarts-all.js"></script>
<script language="JavaScript">
    //获取到这个DOM节点，然后初始化

    var myChart1 = echarts.init(document.getElementById("chart1"));
    var myChart2 = echarts.init(document.getElementById("chart2"));
    var myChart3 = echarts.init(document.getElementById("chart3"));
    var myChart4 = echarts.init(document.getElementById("chart4"));

    // option 里面的内容基本涵盖你要画的图表的所有内容
    var option = {
        // 定义样式和数据
        title : {

        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['最高气温','最低气温']
        },
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'最高气温',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'最低气温',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };

    // 一定不要忘了这个，具体是干啥的我忘了，官网是这样写的使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
    myChart2.setOption(option);
    myChart3.setOption(option);
    myChart4.setOption(option);
</script>
</html>